<template>
	<view>
		<van-sticky offset-top="0">
			<!-- <van-search :value="keywords" placeholder="请输入搜索关键词" /> -->
			<van-dropdown-menu>
				<van-dropdown-item v-model="value2" :options="option2" title='状态' @change='change2'/>
				<van-dropdown-item v-model="value1" :options="option1" title='调动原因' @change='change1'/>
			</van-dropdown-menu>
		</van-sticky>
		<view>
			<view v-for="(item,index) in list" :key="index" class="card" @click="routeTo(item)">
				<view class="createTime">
					<view class="typeName">{{item.transferReason}}</view>
					<view style="flex:1">
						<van-tag type="success" v-if="item.nowStatus=='PASS'">通过</van-tag>
						<van-tag type="danger" v-if="item.nowStatus=='REJECT'">未通过</van-tag>
						<van-tag color="#e1e1e1" v-if="item.nowStatus=='CANCEL'">取消</van-tag>
						<van-tag type="primary" v-if="item.nowStatus=='PROCESSING'">审批中</van-tag>
					</view>
					<view class="time">{{item.createTime }}</view>
				</view>
				<view style="padding-bottom: 10rpx;">{{item.tip}} </view>
				<view >
					<view class="time">转出单位：{{item.nowNodeTitle}}</view> 
					<view class="time">申请时间：{{item.createTime}}</view>
				</view> 
			</view>
			<view v-if="total==0&&noData==true"> 
				<van-empty image-size="150" description="暂无记录" />
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		approvaMobilizelPage,
	} from "@/api"
	import { USER_INFO_KEY } from "@/enums/cacheEnum"
    const userInfo = ref(cache.get(USER_INFO_KEY))
	const pageData = ref({
		current: 1,
		size: 10
		}) 
	const option1 = ref([{
			text: '异地分居申请调动',
			value: '异地分居申请调动'
		},
		{
			text: '照顾重疾父母申请调动',
			value: '照顾重疾父母申请调动'
		},
		{
			text: '其他原因申请调动',
			value: '其他原因申请调动'
		},
	])
	const option2 = ref([{
			text: '待处理',
			value: 0
		},
		{
			text: '已处理',
			value: 1
		}, 

	])
	const value1 = ref(null)
	const value2 = ref(0)
	const keywords = ref('')
	const list =ref([])
	const noData=ref(false)
	const total=ref(0)
	onLoad(()=>{
		getList()
	})
	// 选择审批状态
	const change1 = (e) => {
		pageData.value.current == 1
		list.value = []
		getList()
	}
	// 选择请假类型
	const change2 = (e) => {
		pageData.value.current == 1
		list.value = []
		getList()
	}
	const getList =()=>{
		let data={
			...pageData.value,
			transferReason:value1.value?value1.value:'',
			nowUserId:value2.value,
			createTime_desc:'createTime_desc',
			viewUsers_like:userInfo.value.id
		}
		approvaMobilizelPage(data).then(res=>{
			list.value = pageData.value.page == 1 ? res.data.records : list.value.concat(res.data.records)
			total.value = res.data.total
			noData.value = res.data.total > 0 ? false : true
			console.log(list.value)
		})
	}
	const routeTo=(item)=>{
		uni.navigateTo({
			url:'/pages/mobilize/detail?type=2&id='+item.id
		})
	}
	onReachBottom(() => {
		if (total.value > list.value.length) {
			pageData.value.current = pageData.value.current + 1
			getList()
		}
	})
</script>
<style scoped lang="scss">
.card {
		width: 690rpx;
		border-radius: 20rpx;
		margin: 20rpx auto;
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;

		.typeName {
			font-weight: 600;
			font-size: 32rpx;
			margin-right: 20rpx;
		}

		.createTime {
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
		}

		.time {
			color: #8d8d8d;
			font-size: 24rpx;
		}
	}
</style>